<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { onMounted, ref, watch } from 'vue';
import { likeWorkApi,dislikeWorkApi,isLikeWorkApi,workLikeNumApi } from '@/apis/work';

const props = defineProps({
    workInfo: Object
})
const workInfoRef = ref(props.workInfo)

const toWorkInfo = (id)=>{
  uni.navigateTo({
  url: `/components/workInfo?workId=${id}`
});
}


const likeNum = ref(1)

const dataInit = async()=>{
  const isLikeRes = await isLikeWorkApi({'workId':workInfoRef.value.workId})
  islike.value = isLikeRes.data
  if(isLikeRes.data){
    likeType.value = 'heart-filled'
    color.value = '#e5404f'
  }else{
    likeType.value = 'heart'
    color.value = '#666666'
  }
  // 发送请求获取这个work的点赞数量
  const likeNumRes = await workLikeNumApi({'workId':workInfoRef.value.workId})
  likeNum.value = likeNumRes.data
}

onShow(()=>{
  dataInit()
})
onMounted(async ()=>{
  dataInit()
})

const islike = ref(false)
const likeType = ref('heart')
const color = ref('#666666')
const like = async()=>{
  islike.value = !islike.value
  if(islike.value){
      likeType.value = 'heart-filled'
      color.value = '#e5404f'
      const res = await likeWorkApi({'workId':workInfoRef.value.workId})
    }else{
      likeType.value = 'heart'
      color.value = '#666666'
      const res = await dislikeWorkApi({'workId':workInfoRef.value.workId})
    }
    const likeNumRes = await workLikeNumApi({'workId':workInfoRef.value.workId})
    likeNum.value = likeNumRes.data
}

</script>
<template>
<view class="single-card">
  <!-- 作品图片 -->
  <div class="header" @click="toWorkInfo(workInfo.workId)">
    <view>
    <img :src="workInfo.indexImg" alt="" style="max-width: 100%; max-height: 100%;">
  </view>
  <!-- 标题 -->
  <div class="container">
    <view>
    <text class="title">{{workInfo.workTitle}}</text>
  </view>
  </div>
  </div>
<!-- 底部操作栏 -->
  <div class="footer">
  <view>
    <view class="card-actions">
    <view class="card-actions-item">
      <image :src="workInfo.avatarImg" class="userHead"/>
      <div class="username">
        {{workInfo.userName}}
      </div>
    </view>
    <view class="card-actions-item">
      <!-- <uni-icons type="heart" size="18" color="#999"></uni-icons> -->
      <uni-icons :type="likeType" size="18" :color="color" @click="like"></uni-icons>
      <text class="card-actions-item-text" v-if="islike">{{ likeNum }}</text>
      <text class="card-actions-item-text" v-else>点赞</text>
    </view>
  </view>
  </view>
  </div>
</view>
</template>
<style scoped>
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
}
.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card-actions-item-text {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}
.title{
  max-width: 100%;
  font-weight: bold;
}
.single-card{
  margin: 5rpx;
  background-color: #f1f1f1;
  border-radius: 10rpx;
  width: 98%;
}
.userHead {
  border-radius: 100%;
  overflow: hidden;
  max-width: 50rpx;
  max-height: 50rpx;
}
.username {
  color: #666;
  font-size: small;
  margin-left: 10rpx;
}
</style>
